import React, { useState } from 'react';
import { Image, ScrollView, Text, View } from 'native-base';
import { Modal, StyleSheet, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { Divider } from '@rneui/base';
import { useDispatch } from 'react-redux';
import { AppDispatch } from '../../../../redux/store.ts';
import EventCollection from '../eventCollection.ts';
import { updateBtnInformation } from '../../../../redux/reducers/app.ts';

interface IMergerCaseModalProps {}

let mergerCaseInstance: any = null;
const MergerCaseModal: React.FC<IMergerCaseModalProps> = (props) => {
  const [visible, setVisible] = useState(false);
  const [data, setData] = useState<IServerBtnListBtnList[]>([]);
  const [contentHeight, setContentHeight] = useState<number>(0);
  const dispatch = useDispatch<AppDispatch>();
  const maxHeight = 500;

  // 动态获取内容的高度
  const handleContentSizeChange = (contentWidth: number, contentHeight: number) => {
    setContentHeight(contentHeight);
  };

  const handlePress = (item: IBtnFormatsList) => {
    EventCollection.onPress(item, 1);
    dispatch(updateBtnInformation({ ...item }));
    hide();
  };

  const show = (data: IServerBtnListBtnList[]) => {
    setVisible(true);
    setData(data);
  };

  const hide = () => {
    setVisible(false);
  };

  // 将组件的实例挂载到全局
  mergerCaseInstance = { show, hide };

  return (
    <React.Fragment>
      <Modal transparent={true} visible={visible} animationType="fade" onRequestClose={() => hide()}>
        <TouchableWithoutFeedback onPress={() => hide()}>
          <View style={styles.overlay}>
            <ScrollView style={[styles.container, { maxHeight: Math.min(contentHeight, maxHeight) }]} onContentSizeChange={handleContentSizeChange}>
              {data.map((item) => {
                return (
                  <React.Fragment key={item.id}>
                    <TouchableOpacity style={styles.item} onPress={() => handlePress(item)}>
                      <Image style={{ width: 100, height: 100 }} resizeMode={'contain'} source={{ uri: item.value }} alt={''} />
                      <View ml={2} flex={1} justifyContent={'space-evenly'}>
                        <Text numberOfLines={2} fontWeight={'bold'}>
                          {item.name}
                        </Text>
                        <Text numberOfLines={2} fontSize={12}>
                          {item.describes}
                        </Text>
                      </View>
                    </TouchableOpacity>
                    <Divider />
                  </React.Fragment>
                );
              })}
            </ScrollView>
          </View>
        </TouchableWithoutFeedback>
      </Modal>
    </React.Fragment>
  );
};
const styles = StyleSheet.create({
  overlay: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0, 0, 0, 0.4)' },
  container: { width: '90%', backgroundColor: '#fff', borderRadius: 10 },
  item: { padding: 8, flexDirection: 'row' },
});

// 全局函数用于调取组件的实例
export const ShowMergerCaseModal = {
  show: (data: IServerBtnListBtnList[]) => {
    if (mergerCaseInstance) {
      mergerCaseInstance.show(data);
    }
  },
  hide: () => {
    if (mergerCaseInstance) {
      mergerCaseInstance.hide();
    }
  },
};

export default MergerCaseModal;
